<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:insert="~{common/common::common}"/>
<head>
    <meta charset="UTF-8">
    <title>各省市广告点击量</title>
</head>
<body>
    <div th:replace="~{common/leftnavbar::leftnav}"></div>
    <div style="width:600px; margin-left: 300px">
        <input type="text" name="province" id="province" placeholder="请输入省份">
        <input type="text" name="city" id="city" placeholder="请输入城市">
        <button id="btn">搜索</button>
    </div>
    </div>
    <div id="chart_box" style="width: 1250px;height:550px;margin:0 auto;"></div>
</body>
<script type="text/javascript" th:inline="javascript">

    var dom = document.getElementById("chart_box");
    var myChart = echarts.init(dom);
    option = null;
    // var data = [], datalg = [], datasr = [], dataX = [];
    var temp = [];
    var title = null;
    // var provincet = "7";
    // var cityt = "7";

    mybar("广东","广州")
    document.getElementById('btn').addEventListener('click',function(){
        var inputDom = document.getElementById("province");
        var provincet = inputDom.value;
        var inputDom1 = document.getElementById("city");
        var cityt = inputDom1.value;
        //alert(areatmp)
        //myChart.clean();
        mybar(provincet,cityt);
    });


    function mybar(province,city){
        var data = [], datalg = [], datasr = [], dataX = [];
        axios.get('/stat_data',{
            params:{
                province: province,
                city: city
            }
        })
            .then(function (res) {
                data = Object.values(res.data);

                for (var i=0;i<data.length;i++){
                    province = data[i].province;
                    city = data[i].city;
                    dataX.push(data[i].adid);
                    title = "adid-"+data[i].adid +"clickCount-"+data[i].clickCount; //TODO
                    datalg.push(data[i].clickCount);
                }
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: [province+city]
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: dataX,
                            name: "广告id",
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '点击量',
                            min: 0,
                            max: 250,
                            interval: 50,
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },
                    ],
                    series: [
                        {
                            name: '广告点击次数',
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + '次';
                                }
                            },
                            data: datalg
                        },
                    ]
                };
                myChart.setOption(option, true);
            })
            .catch(function (error) {
                console.log(error);
            });


    }

    function accessfunc() {
        if (document.getElementById("access").getAttribute("class")=="layui-nav-item layui-nav-itemed"){
            document.getElementById("access").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("access").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }

    function categoryfunc() {
        if (document.getElementById("category").getAttribute("class")=="layui-nav-item layui-nav-itemed"){
            document.getElementById("category").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("category").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }
    document.getElementById("access").setAttribute("class", "layui-nav-item layui-nav-itemed");
</script>
</html>
